<template>
    <div>

        <!--       卡片视图 /-->
        <el-card>
            <el-alert title="注意：只能为三级设置相关参数"
                      type="warning"
                      :closable="false"
                      show-icon

            ></el-alert>
            <el-row class="cat_opt">
                <el-col>
                    <span>
                        选择商品分类：
                    </span>

                    <el-cascader
                            v-model="selectCatekeys"
                            :options="Catelist"
                            :props="catelistopt"
                            @change="selectChange"
                    >
                    </el-cascader>

                </el-col>
            </el-row><el-row class="cat_opt">
                <el-col>
                    <el-tabs v-model="activeName" @tab-click="handleTabClick">
<!--                        //动态参数面板-->
                        <el-tab-pane label="动态参数" name="many">
<!--                            添加参数-->
                            <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addParams">立即添加</el-button>

                            <el-table :data="manyTableData" border stripe>
                                <el-table-column type="expand">

                                    <template slot-scope="scope">
                                        <el-tag style="padding: 10px" v-for="(item ,i) in scope.row.attr_vals" :key="i" closable>
                                            {{item}}


                                        </el-tag>
                                    </template>

                                </el-table-column>
                                <el-table-column type="index" label="#"></el-table-column>
                                <el-table-column prop="attr_name" label="名称"></el-table-column>
                                <el-table-column  label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="primary" size="mini" @click="editParams(scope.row)">编辑</el-button>
                                        <el-button type="danger" size="mini" @click="deleteParams(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>

                            </el-table>






                        </el-tab-pane>
<!--                        静态属性面板-->
                        <el-tab-pane label="静态属性" name="only">
                            <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addParams">立即添加</el-button>

                            <el-table :data="onlyTableData" border stripe>
                                <el-table-column type="expand">
                                    <template slot-scope="scope">
                                        <el-tag  v-for="(item ,i) in scope.row.attr_vals" :key="i" closable>
                                            {{item}}


                                        </el-tag>
                                    </template>


                                </el-table-column>
                                <el-table-column type="index" label="#"></el-table-column>
                                <el-table-column prop="attr_name" label="属性名称"></el-table-column>
                                <el-table-column  label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="primary" size="mini" @click="editParams(scope.row)">编辑</el-button>
                                        <el-button type="danger" size="mini" @click="deleteParams(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>

                            </el-table>


                        </el-tab-pane>

                    </el-tabs>
                </el-col>
            </el-row>
        </el-card>


<!--        //添加参数的-->

        <el-dialog
                :title="'添加'+textTitle"
                :visible.sync="addCatedialogVisible"
                width="40%"
        >
            <el-form ref="addCateForm" v-model="CateForm" label-width="150px">
                <el-form-item :label="textTitle" > <el-input v-model="CateForm.cate_name"></el-input></el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addCatedialogClosed">取 消</el-button>
                <el-button type="primary" @click="submitCate">确定</el-button>
            </span>
        </el-dialog>

<!--        编辑-->

        <el-dialog
                title="修改"
                :visible.sync="editCatedialogVisible"
                width="40%">
            <el-form ref="editCateForm" v-model="CateForm" label-width="150px">
                <el-form-item :label="textTitle" > <el-input v-model="CateForm.cat_new_name"></el-input></el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editCatedialogClosed">取 消</el-button>
                <el-button type="primary" @click="submitParams">确定</el-button>
            </span>
        </el-dialog>



    </div>
</template>

<script>
    export default {
        name: "Cate_params",
        data(){
            return{
                Catelist:[],
                selectCatekeys:[],
                catelistopt:{
                    expandTrigger: 'hover' ,
                    value:'cat_id',
                    label:'cat_name',
                    children:'children'
                },
                activeName:'many',
                //动态属性的数据
                manyTableData:[],
                //静态参数的数据
                onlyTableData:[],
                editCatedialogVisible:false,
                addCatedialogVisible:false,
                CateForm:{
                    cat_new_name:'',
                    attr_id:'',
                    cateId:'',
                    cate_name:''
                }


            }
        },
        created() {
            this.getAllCatelist()
        },
        methods:{
            //获取数据
            async getAllCatelist(){

                let {data:res}=await   this.$http.get('categories')
                console.log(res)
                if (res.meta.status != 200) return Message.error(res.meta.msg)
                this.Catelist=res.data
            },
            //是否选中为三级列别
            async selectChange(){
                this.getParamsData()
            },
            //Tab页签点击处理事件
            handleTabClick(){
                this.getParamsData()
            },
            //获取参数数据
            async  getParamsData(){
                if (this.selectCatekeys.length!=3){
                    this.selectCatekeys=[]
                    return
                }
                //根据所选分类的ID和
                let {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:this.activeName}})
                if (res.meta.status != 200) return Message.error(res.meta.msg)
                console.log(res)
                if(this.activeName==='many'){
                    this.manyTableData = res.data

                }
                else{
                    this.onlyTableData = res.data
                }

            },

            submitCate(){
                console.log(this.selectCatekeys)
            },
            //提交参数
            addParams(){
                this.addCatedialogVisible=true
            },
            //编辑动态参数
            async  editParams(cate){
                console.log(cate)
                this.cateId=cate.cat_Id
                this.attr_id = cate.attr_id
               let {data:res} = await   this.$http.get(`categories/${this.cateId}/attributes/${cate.attr_id}`,{
                    params: {
                        attr_sel: this.activeName
                    }
                })
                if (res.meta.status != 200) return this.$message.error(res.meta.msg)
                console.log(res)
                this. CateForm.  cat_new_name=res.data.attr_name
                this.editCatedialogVisible=true
            },
            //  // 删除参数
            async deleteParams(cate){

                //根据Id删除参数
               let result =await  this.$confirm('将永久删除！','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).catch(err=>{})

                if (result !='confirm'){

                    return this.$message.info('已取消删除')
                }

                let {data:res} = await   this.$http.delete(`categories/${this.cateId}/attributes/${cate.attr_id}`)
                if (res.meta.status != 200) return this.$message.error(res.meta.msg)
                this.$message.success('删除成功')

            },
            editCatedialogClosed(){
                this.editCatedialogVisible=false
            },addCatedialogClosed(){
                this.addCatedialogVisible=false
            },
            //提交数据到服务器
            async  submitParams(){
                console.log(this.cateId)
                let {data:res} = await   this.$http.put(`categories/${this.cateId}/attributes/${this.attr_id}`,{
                    attr_name:this.CateForm.cat_new_name,attr_sel:this.activeName
                })
                if (res.meta.status != 200) return this.$message.error(res.meta.msg)
                console.log(res)
                this.$message.success(res.meta.msg)
                this.getParamsData()

               this. editCatedialogVisible=false
            }
        },
        computed: {
            //是否可用
            isBtnDisabled() {
                return this.selectCatekeys.length == 3 ? false : true
            }
            ,
            //计算三级ID
            cateId() {
                if (this.selectCatekeys.length == 3) {
                    return this.selectCatekeys[2]
                }
                return null
            },
            //
            textTitle(){
              return  this.activeName === 'many'? '动态参数':'静态属性'



        }

        }
    }
</script>

<style scoped>
.cat_opt{
    margin: 15px 0;
}
</style>
